<template>
	<view class="page-wraper">		
		<view  v-if="info.cancel == -1" class="review_status">
			寻车已取消
		</view>
		<view class="find_card">
			<view class="price_title_view" style="">
				<text class="title">寻车信息</text>
			</view>
			
			<view style="margin-right:10px; margin-top: 10px; margin-left: 18px;">	
				<view class="subtitle_text">{{info.model_name}}</view>
				<view class="find_left_text" style="margin-top:17px;">指导价：{{info.guide_price}}</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">外观内饰</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{info.appearance}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">上牌地区</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{info.area}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">车龄</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{info.car_age}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">里程</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{info.mileage}}</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">预算</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{info.budget_money}}</view>
				</view>
<!-- 				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">有效期</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view>
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">电话报价</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">黑/棕</view>
				</view> -->
				<view style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_left_text">发布时间</view>
					<view style="flex: 1;"></view>
					<view class="find_right_text">{{info.create_time}}</view>
				</view>
				<view class="find_right_text" style="margin-top:13px;">
					备注信息
				</view>
				
				<view style="height: 10px;"></view>
				
				<view class="tag-group">
					<view class="tag" v-for="(item,index) in info.notes"  style="margin-top: 0px;">
						{{item}}
					</view>
				</view>
				
				<view v-if="info.describe" class="find_left_text" style="margin-top: 13px;">
					{{info.describe}}
				</view>
				
				<view style="margin-bottom: 13px;"></view>
			</view>	
		</view>
		
		<view v-if="info.quotation_number > 0" class="find_card">
			
			<view style="margin:14px;">
				<view @click="getVendorList()" style="flex-direction: row; display: flex; margin-top:13px;">
					<view class="find_right_text">供应商报价记录（{{info.quotation_number}}）</view>
					<view style="flex: 1;"></view>
					<image src="/static/right_back.png" style="width: 7px; height:14px" mode="aspectFit" ></image>
				</view>
			</view>
		</view>
		
		
		<view v-if="info.cancel == 1" @click="cancelSearchCar()" class="enter_btn">
			取消寻车
		</view>
		
		<view v-if="info.cancel == -1" @click="deleteSearchCar()"  class="cancel_btn">
			删除
		</view>
		
	</view>
</template>

<script>
	import uniListCarSource from '@/components/uniListCarSource/uniListCarSource.vue'
	import {
		getMySearchDetails, 
	usedCarSearchMyReleaseCancel, 
	usedCarSearchSupplierQuotationList,
	usedCarSearchMyReleaseDelete,
	} from '@/api/search-car.js'
	
	export default {
		components: {
			uniListCarSource
		},
		
		onLoad:function(options){
			this.getPageData(options)
		},
		
		
		data() {
			return {
				info: {},
				userId: "",
				id: "",
			}
		},
		methods: {
			
			getPageData(options) {
				try {
					const value = uni.getStorageSync('login');
					if (value === '') {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						let userid = value.id
						this.userId = userid
						let id = options.id
						this.id = id
						let param = {
							"id" : id,
							"users_id": userid,
						}
						getMySearchDetails(param)
						.then(res => {
							let code = res.code
							if (code == 0) {
								this.info = res.data
							}
						})
						.catch(e => {
							
						})
					}
					
				} catch (e) {
					// error
				}
			},
			
			getVendorList() {
				uni.navigateTo({
					url: '/pages/home/offer/findcarOfferList?id=' + this.id
				})
			},
			
			deleteSearchCar() {
				let params = {
					"id" : this.id,
					"users_id": this.userId,
				}
				
				var that = this
				uni.showModal({
						title: '提示',
						content: "确定要删除寻车？",
						confirmText: '删除',
						confirmColor: "#0E59EA",
						cancelText: '再想想',
						cancelColor: "#333333",
						success:function(res){
							if (res.confirm) {
								usedCarSearchMyReleaseDelete(params)
								.then(res => {
									uni.navigateBack({
										delta: 1
									})
								})
							}
						}
					})
			},
			
			cancelSearchCar() {
				let params = {
					"id" : this.id,
					"users_id": this.userId,
					"cancel_reason": "无理由"
				}
				
				

				var that = this
				uni.showModal({
						title: '提示',
						content: "确定要取消寻车？",
						confirmText: '确定',
						confirmColor: "#0E59EA",
						cancelText: '再想想',
						cancelColor: "#333333",
						success:function(res){
							if (res.confirm) {
								usedCarSearchMyReleaseCancel(params)
								.then(res => {
									if (res.code == 0) {
										
										let page = getCurrentPages().pop()
										that.getPageData(page.options)
										// uni.redirectTo({
										// 	url: page.route,
										// 	params: page.options
										// });
										
										// setTimeout(() => {
										// 	that.reload()
										// }, 500)
									}
								})
							}
						}
					})
				},
			
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #F0F0F0, #F0F0F0);
	}
	
	.review_status {
		width: 100%;
		height: 40px;
		background: #EDF1FF;
		opacity: 1;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #0E59EA;
		display: flex;
		align-items: center;
		padding-left: 14px;
	}
	
	
	.tag-group {
		display: flex;
		flex-wrap: wrap;
		margin-right: 50px;
		margin-bottom: 10px;
		margin-top: 6px;
	}
	
	.enter_btn {
		margin: 34px 27px 80px 24px;
		height: 47px;
		background: #0E59EA;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 500;
		color: #FFFFFF;
		font-size: Source Han Sans CN;
		border-radius: 7px;
	}
	
	.cancel_btn {
		height: 47px;
		margin: 34px 27px 80px 24px;
		background: #FFFFFF;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 16px;
		font-weight: 500;
		color: #33333;
		border-radius: 7px;

	}
	
	.find_left_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.find_right_text {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.connect_btn {
		width: 90px;
		height: 30px;
		background: #0E59EA;
		opacity: 1;
		border-radius: 14px;
		margin-right: 10px;
		font-size: 12px;
		font-weight: 500;
		color: #FFFFFF;
	}
	
	.tag {
		/* width: 90px; */
		/* height: 27px; */
		background: #EDF1FF;
		border-radius: 14px;
		font-size: 12px;
		font-weight: 400;
		color: #0E59EA;
		/* display: flex; */
		/* justify-content: center; */
		/* align-items: center; */
		font-family: Source Han Sans CN;
		padding: 5px 14px 5px 14px;
		margin-right: 6px;
		opacity: 1;
	}
	
	
	
	.feeckback_btn {
		width: 90px;
		height: 30px;
		border: 1px solid #1C2125;
		border-radius: 14px;
		margin-right: 10px;
		
		font-size: 12px;
		font-weight: 500;
		color: #1C2125;
	}
	
	.right_btn {
		width: 7px;
		height: 13px;
	}
	
	
	.logis_bar {
		margin-top: 12px;
		height: 34px;
		background: rgba(230,237,253,1);
		border-radius: 0px;
	}
	
	.subtitle_text {
		font-size: 14px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.time_text {
		font-size: 12px;
		font-weight: 500;
		color: #ED2F2F;
		opacity: 1;
		/* background-color: red; */
	}
	
	.name_text {
		font-size: 11px;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	
	.black_text {
		font-size: 11px;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}
	
	.guide_text {
		margin-left: 14px;
		height: 19px;
		font-size: 11px;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}
	
	.price_text {
		height: 22px;
		font-size: 19px;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #ED2F2F;
		opacity: 1;
		margin-left: 5px;
	}
	
	.primary_num {
		height: 22px;
		font-size: 12px;
		font-weight: 600;
		color: #FFFFFF;
		opacity: 1;
	}
	
	.price_card {
		margin: 70px 14px 0px 14px;
		height: auto;
		background-color: white;
		border-radius: 7px;
		font-family: PingFang SC;
	}
	
	.find_card {
		margin-top: 10px;
		background-color: white;
		height: auto;
		font-family: PingFang SC;
	}
	
	.title {
		font-size: 15px;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		font-family: Alimama ShuHeiTi;
	}
	
	.price_title_view {
		width: 67px;
		margin-top: 34rpx;
		margin-left: 30rpx;
		margin-bottom: 42rpx;
		background: url(/static/bac-small.png);
		background-size: 100% 100%; //背景图片能够显示全
	}

	.gradient_view {
		width: 30px;
		height: 24px;
		background: radial-gradient(circle, #0E59EA 0%, rgba(255,255,255,0) 100%);
		border-radius: 50%;
		opacity: 0.5;
	}

	.page-wraper {
		position: absolute;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #F7F7F7;
	}
	.header-view-box {
		position: fixed;
		top: 10;
		width: 100%;
		z-index: 11;
	}

	.view-box {
		display: flex;
		background-color: white;
	}

	
</style>